<template>
    <div class="bodyBox">
        <div class="title">Our Models</div>
        <div class="allPicture">
            <div class="pirctureBox" v-for="(item) in modelData" @click="toProfile(item.id)">
                <img class="firstImage" :src="item.headImage" alt="">
                <div class="name">Anna</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { showAllModelAPI } from '@/apis/user';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()

const toProfile = (id: number) => {
    router.push('/profile/' + id)
}

const modelData = ref([{
    "id": 1,
    "name": "Anna",
    "headImage": "https://model-project3.oss-cn-guangzhou.aliyuncs.com/7d97b6fa-71ec-41f3-b463-86d90ed90b07.jpg",
    "sex": 1,
    "height": "170cm / 5′ 7”",
    "bust": "78cm / 30½”",
    "waist": "58cm / 23”",
    "hips": "86cm / 34”",
    "hair": "ipsum",
    "eyes": null,
    "shoes": "38EU / 7US / 5UK"
}])

const getAllModels = async () => {
    const res = await showAllModelAPI();

    if (res.data.code === 200) {
        modelData.value = res.data.data
    }
    else {
        ElMessage.error(res.data.msg)
    }
}

onMounted(() => {
    getAllModels()
})

</script>

<style lang="scss" scoped>
.bodyBox {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;

    .image {
        img {
            width: 100%;
        }
    }

    .title{
        font-family: 'Playfair Display';
        display: flex;
        justify-content: center;
        font-size: 36px;
    }

    .allPicture {
        width: 100%;
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;

        .pirctureBox {
            width: 100%;
            display: flex;
            flex-direction: column;
            // position: relative;

            img {
                width: 100%;
                height: 100%;
                transform: scale(1.1);
                transform: scale(1);
                transition: all .4s;
            }

            .firstImage {
                width: 100%;
                height: 100%;
                transition: opacity .5s ease-in-out;
                /* 添加过渡效果 */
            }

            .name {
                color: #2d2e33 !important;
                font-family: Montserrat;
                font-size: 11px;
                line-height: 1.4;
                display: flex;
                justify-content: center;
                height: 40px;
                align-items: center;
            }
        }
    }
}
</style>